<template>
  <lay-menu
    v-model:selectedKey="selectKey"
    v-model:openKeys="openKeys"
    :collapse="collapse"
    :tree="isTree"
    :level="appStore.level"
    :inverted="appStore.inverted"
  >
  <lay-menu-item id="/main">
        <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon>
        </template>
        <template #title> 首页 </template>
      </lay-menu-item>
    <lay-sub-menu id="0">
      <template #icon>
        <lay-icon type="layui-icon-key"></lay-icon>
      </template>
      <template #title> 管理 </template>
      <lay-menu-item id="/user">
        <template #icon>
          <lay-icon type="layui-icon-user"></lay-icon>
        </template>
        <template #title> 用户管理 </template>
      </lay-menu-item>
      <lay-menu-item id="/manager">
        <template #icon>
          <lay-icon type="layui-icon-group"></lay-icon>
        </template>
        <template #title> 管理员管理 </template>
      </lay-menu-item>
    </lay-sub-menu>
    <lay-menu-item @click="JoinGroup">
        <template #icon>
          <lay-icon type="layui-icon-login-qq"></lay-icon>
        </template>
        <template #title> 加入开发交流群 </template>
    </lay-menu-item>
    <lay-menu-item @click="JoinGitee">
        <template #icon>
          <lay-icon type="layui-icon-file-b"></lay-icon>
        </template>
        <template #title> 项目链接 </template>
    </lay-menu-item>
  </lay-menu>
</template>

<script lang="ts">

export default {
  name: "GlobalMenu",
  methods:{
    JoinGroup(){
      window.open("https://jq.qq.com/?_wv=1027&k=7m4pnyGM");
    },
    JoinGitee(){
      window.open("https://gitee.com/fcsq-security-team2/st-forum");
    }
  }
};
</script>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import { ref, watch } from "vue";
import { useAppStore } from "../../store/app";

const appStore = useAppStore();

interface MenuProps {
  collapse: boolean;
}

const props = withDefaults(defineProps<MenuProps>(), {
  collapse: false,
});

const route = useRoute();
const router = useRouter();
const selectKey = ref(route.path);
const openKeys = ref(["0"]);
const isTree = ref(true);

watch(route, (val) => {
  selectKey.value = route.path;
});

watch(selectKey, (val) => {
  router.push(val);
});
</script>
